<template>
    <div class="message">
        <scroll-container ref="currentMessageContain">
            <p v-show="userData.currentMessages.length === 0"
               class="pt-xs pl-m fs-xs">
                你还没有和其他人进行过对话
            </p>
            <ul @click="changeChatTarget">
                <li v-for="(item, index) in userData.currentMessages" :key="item._id">
                    <div class="flex opposite pl-m pt-s pb-s pr-xs relative" :class="{'active': messageActive[index]}">
                        <div class="profile relative mr-xs">
                            <div class="avatar" :style="{
                                backgroundImage: `url(${item.opposite.profile.url})`,
                                backgroundSize: item.opposite.profile.scale + 'px',
                                backgroundPosition: `${item.opposite.profile.pos.x}px ${item.opposite.profile.pos.y}px`,
                            }">
                                <img src="../../../assets/user-circle.png"
                                     alt=""
                                     v-if="item.opposite.profile.url === ''"
                                     style="width: 100%"
                                >
                            </div>
                        </div>
                        <div class="f1">
                            <div class="flex jc-space-between mt-xxs">
                                <h4 class="fc-white fs-m">{{item.opposite.username}}</h4>
                                <p class="fs-xs">{{item.content.mList[item.content.mList.length - 1].time.slice(16, 21)}}</p>
                            </div>
                            <div class="text flex ai-center">
                                <p class="content">{{item.content.mList[item.content.mList.length - 1].text}}</p>
                                <div class="unread" v-show="item.unread !== 0">{{item.unread}}</div>
                            </div>
                        </div>
                        <div class="mask" :data-id="item.opposite._id" :data-index="index"></div>
                    </div>
                </li>
            </ul>
        </scroll-container>
    </div>
</template>

<script>
    export default {
        name: "MessagePanel",
        props: ['active'],
        data() {
            return {

            }
        },
        inject: ['updateChatMessage'],
        computed: {
            userData() {
                return this.$store.state.userData;
            },

            messageActive() {
                return this.$store.state.messageActive;
            },

            chatData() {
                return this.$store.state.chatData;
            },
        },
        methods: {
            changeChatTarget(e) {
                this.$store.commit('updateMessageActive', e.target.dataset.index);
                for (let item of this.userData.friends) {
                    if (item._id === e.target.dataset.id) {
                        this.$store.commit('updateChatTarget', item)
                        break;
                    }
                }
                this.updateChatMessage(e.target.dataset.id);
            },
        }
    }
</script>

<style scoped lang="scss">
    .opposite {
        cursor: pointer;

        &:hover {
            background-color: #3a3c42;
        }

        &.active {
            background-color: #292b2e;
        }

        .text {
            display: flex;
            justify-content: space-between;

            .content {
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .remind {
                width: 25px;
                color: white;
                text-align: center;
                border-radius: 8px;
                background-color: #ed3714;
            }
        }
    }

    .profile {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        flex-shrink: 0;

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-repeat: no-repeat;
        }
    }

    .username {
        margin-bottom: 5px;
    }

    .text{
        margin-top: 2px;

        .content {
            height: 20px;
        }

        .unread {
            width: 26px;
            height: 18px;
            line-height: 18px;
            border-radius: 10px;
            text-align: center;
            color: white;
            background-color: #ed3714;
        }
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>